
<div class="card">
    <div class="card-image  teal" style="height:238px;">

        <h5 class="white-text" style="display: inline-block; margin-bottom: 63px;">Responses Table</h5>
        <canvas width="200" height="200" style=" display: inline-block; float: left;"></canvas>
    </div>
    <div class="card-content">
        <span class="card-title activator grey-text text-darken-4">Reponses<i class="material-icons right">info_outline</i></span>
        <p>Type: <span class="teal-text">Text Question  </span><br></p>
    </div>
    <div class="card-reveal">
        <span class="card-title teal-text">Responses<i class="material-icons right">close</i></span>
        <table width="200">
            <thead>
            <tr>
                <th data-field="user" style="width: 100px;">User</th>
                <th data-field="response" style="width: 100px;">Reponse</th>
            </tr>
            </thead>

            <tbody>
            {% for user, response in stat %}
                <tr>
                    <td class="teal-text">{{ user }}</td>
                    <td class="truncate" >{{ response }}</td>
                </tr>
            {% empty %}
                <tr>No responses until now</tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
</div>
